<!--
 * @Author: daidai
 * @Date: 2022-03-04 09:23:59
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-05-07 11:05:02
 * @FilePath: \web-pc\src\pages\big-screen\view\indexs\index.vue
-->
<template>
	<div>
		<!-- 头部 s -->
		<div class="d-flex jc-center title_wrap">
			<div class="zuojuxing"></div>
			<div class="youjuxing"></div>
			<div class="guang">
				<Nav />
			</div>
			<div class="d-flex jc-center">
				<div class="title">
					<span class="title-text">大豆种植管理平台</span>
				</div>
			</div>
		</div>
		<!-- 头部 e-->
		<div class="contents">
			<div class="grid" v-for="(item,index) in plantList" :key='index'>
				<ItemWrap class="contetn_left contetn_lr-item" :title="`栽培技术${$SN[index]}`">
					<div v-if="pageFlag">
						<InfoCard :info='item' />
					</div>
					<Reacquire v-else @onclick="getData" line-height="200px">
						重新获取
					</Reacquire>
				</ItemWrap>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		currentGET
	} from 'api/modules'

	export default {
		data() {
			return {
				pageFlag: false,
				plantList: [],
			};
		},
		created() {
			this.getData()
		},
		mounted() {},
		methods: {
			getData() {
				currentGET("plant").then((res) => {
					if (res.flag) {
						this.pageFlag = true;
						this.plantList = res.data
					} else {
						this.pageFlag = false;
						this.$Message.warning(res.msg);
					}
				});
			},
		},
	};
</script>
<style lang="scss" scoped>
	// 内容
	.contents {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
	}

	.grid {
		flex: 1 0, 33.33%;
		box-sizing: border-box;
		padding: 6px 16px 0;
	}

	.contetn_left {
		width: 590px;
		box-sizing: border-box;
	}

	.contetn_lr-item {
		height: 310px;
	}


	@keyframes rotating {
		0% {
			-webkit-transform: rotate(0) scale(1);
			transform: rotate(0) scale(1);
		}

		50% {
			-webkit-transform: rotate(180deg) scale(1.1);
			transform: rotate(180deg) scale(1.1);
		}

		100% {
			-webkit-transform: rotate(360deg) scale(1);
			transform: rotate(360deg) scale(1);
		}
	}
</style>
